<template>
    <ul>
        <li>
            <router-link to="/">
                <svg class="icon" v-if="$route.path!=='/'">
                    <use xlink:href="#icon-shouye"></use>
                </svg>
                <svg class="icon" v-else>
                    <use xlink:href="#icon-elemo"></use>
                </svg>
                <br>
                <span>首页</span>
            </router-link>
        </li>
        <li>
            <router-link to="/orders-view">
                <svg class="icon" v-if="$route.path!=='/orders-view'">
                    <use xlink:href="#icon-dingdan"></use>
                </svg>
                <svg class="icon background" v-else>
                    <use xlink:href="#icon-dingdan-copy"></use>
                </svg>
                <br>
                <span>订单</span>
            </router-link>
        </li>
        <li>
            <router-link to="/private-view">
                <svg class="icon" v-if="$route.path!=='/private-view'">
                    <use xlink:href="#icon-wode"></use>
                </svg>
                <svg class="icon background" v-else>
                    <use xlink:href="#icon-wode-copy"></use>
                </svg>
                <br>
                <span>我的</span>
            </router-link>
        </li>
    </ul>
</template>

<script>
    export default {
        name: "TabBar"
    }
</script>

<style scoped>
    ul {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        padding-top: 3px;
        z-index: 10;
        list-style: none
    }

    li {
        height: 100%;
        width: 50px;
        text-align: center;
        font-size: 12px;
    }

    li svg {
        width: 35px;
        height: 30px;
    }

    a {
        color: black;
        text-decoration: none;
    }

    a.router-link-active {
        color: #1296db;
    }

    .background {
        background: #1296db;
        border-radius: 20px;
    }
</style>